<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="HandheldFriendly" content="true" />
		<meta name="MobileOptimized" content="320" />
		<title>Hello H5+ 2</title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="../js/common.js"></script>
		<script type="text/javascript">
			var gentry = null,
				hl = null,
				le = null;
			var er = null,
				ep = null;
			mui.plusReady(function() {
				
				// 获取音频目录对象
				plus.io.resolveLocalFileSystemURL("_doc/", function(entry) {
					entry.getDirectory("audio", {
						create: true
					}, function(dir) {
						gentry = dir;
						updateHistory();
					}, function(e) {
						outSet("Get directory \"audio\" failed: " + e.message);
					});
				}, function(e) {
					outSet("Resolve \"_doc/\" failed: " + e.message);
				});
				
			});
							// DOMContentLoaded事件处理
				document.addEventListener("DOMContentLoaded", function() {
					
					// 获取DOM元素对象
					hl = document.getElementById("history");
					le = document.getElementById("empty");
					er = document.getElementById("record");
					rt = document.getElementById("rtime");
					ep = document.getElementById("play");
					pt = document.getElementById("ptime");
					pp = document.getElementById("progress")
					ps = document.getElementById("schedule");
				}, false);
			 // 添加播放项
			function createItem(entry) {
					var li = document.createElement("li");
					li.className = "ditem";
					li.innerHTML = '<span class="iplay"><font class="aname"></font><br/><font class="ainf"></font></span>';
					li.setAttribute("onclick", "playAudio(this);");
					hl.insertBefore(li, le.nextSibling);
					li.querySelector(".aname").innerText = entry.name;
					li.querySelector(".ainf").innerText = "...";
					li.entry = entry;
					updateInformation(li);
					// 设置空项不可见
					le.style.display = "none";
				}
			
			// 开始录音
			var r = null,
				t = 0,
				ri = null,
				rt = null;

			function startRecord() {
					outSet("开始录音：");
					r = plus.audio.getRecorder();
					if (r == null) {
						outLine("录音对象未获取");
						return;
					}
					r.record({
						filename: "_doc/audio/"
					}, function(p) {
						outLine("录音完成：" + p);
						plus.io.resolveLocalFileSystemURL(p, function(entry) {
							createItem(entry);
						}, function(e) {
							outLine("读取录音文件错误：" + e.message);
						});
					}, function(e) {
						outLine("录音失败：" + e.message);
					});
					er.style.display = "block";
					t = 0;
					ri = setInterval(function() {
						t++;
						rt.innerText = timeToStr(t);
					}, 1000);
				}
				// 停止录音

			function stopRecord() {
					er.style.display = "none";
					rt.innerText = "00:00:00";
					clearInterval(ri);
					ri = null;
					r.stop();
					w = null;
					r = null;
					t = 0;
				}
				// 清除历史记录

			function cleanHistory() {
					hl.innerHTML = '<li id="empty" class="ditem-empty">无历史记录</li>';
					le = document.getElementById("empty");
					// 删除音频文件
					outSet("清空录音历史记录：");
					gentry.removeRecursively(function() {
						// Success
						outLine("操作成功！");
					}, function(e) {
						ouline("操作失败：" + e.message);
					});
				}
				// 获取录音历史列表

			function updateHistory() {
					if (!gentry) {
						return;
					}
					var reader = gentry.createReader();
					reader.readEntries(function(entries) {
						for (var i in entries) {
							if (entries[i].isFile) {
								createItem(entries[i]);
							}
						}
					}, function(e) {
						outLine("读取录音列表失败：" + e.message);
					});
				}
				// 获取录音文件信息

			function updateInformation(li) {
					if (!li || !li.entry) {
						return;
					}
					var entry = li.entry;
					entry.getMetadata(function(metadata) {
						li.querySelector(".ainf").innerText = dateToStr(metadata.modificationTime);
					}, function(e) {
						outLine("获取文件\"" + entry.name + "\"信息失败：" + e.message);
					});
				}
				// 播放音频文件

			function playAudio(li) {
					if (!li || !li.entry) {
						ouSet("无效的音频文件");
						return;
					}
					outSet("播放音频文件：" + li.entry.name);
					startPlay("_doc/audio/" + li.entry.name);
				}
				// 播放文件相关对象
			var p = null,
				pt = null,
				pp = null,
				ps = null,
				pi = null;
			 // 开始播放
			function startPlay(url) {
					ep.style.display = "block";
					var L = pp.clientWidth;
					p = plus.audio.createPlayer(url);
					p.play(function() {
						outLine("播放完成！");
						// 播放完成
						pt.innerText = timeToStr(d) + "/" + timeToStr(d);
						ps.style.webkitTransition = "all 0.3s linear";
						ps.style.width = L + "px";
						stopPlay();
					}, function(e) {
						outLine("播放音频文件\"" + url + "\"失败：" + e.message);
					});
					// 获取总时长
					var d = p.getDuration();
					if (!d) {
						pt.innerText = "00:00:00/" + timeToStr(d);
					}
					pi = setInterval(function() {
						if (!d) { // 兼容无法及时获取总时长的情况
							d = p.getDuration();
						}
						var c = p.getPosition();
						if (!c) { // 兼容无法及时获取当前播放位置的情况
							return;
						}
						pt.innerText = timeToStr(c) + "/" + timeToStr(d);
						var pct = Math.round(L * c / d);
						if (pct < 8) {
							pct = 8;
						}
						ps.style.width = pct + "px";
					}, 1000);
				}
				// 停止播放

			function stopPlay() {
					clearInterval(pi);
					pi = null;
					setTimeout(resetPlay, 500);
					// 操作播放对象
					if (p) {
						p.stop();
						p = null;
					}
				}
				// 重置播放页面内容

			function resetPlay() {
					ep.style.display = "none";
					ps.style.width = "8px";
					ps.style.webkitTransition = "all 1s linear";
					pt.innerText = "00:00:00/00:00:00";
				}
				// 重写关闭
			var _back = window.back;

			function resetback() {
				// 停止播放
				if (ep.style.display == "block") {
					stopPlay();
				} else if (er.style.display == "block") {
					stopRecord();
				} else {
					_back();
				}
			}
			window.back = resetback;
		</script>
		<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8" />
		<style type="text/css">
			.rp {
				width: 100%;
				height: 100%;
				display: none;
				text-align: center;
				position: fixed;
				top: 0;
				background: rgba(0, 0, 0, 0.8);
				z-index: 9999;
				overflow: hidden;
			}
			.aname {
				font-size: 16px;
			}
			.ainf {
				font-size: 12px;
			}
			.rtime {
				font-size: 22px;
				color: #FF0000;
			}
			.ptime {
				margin-top: 40%;
				font-size: 22px;
				color: #FFFFFF;
			}
			.rprogress {
				background: url(../img/arecord.png) no-repeat center center;
				background-size: 32px 32px;
			}
			.rschedule {
				background-color: rgba(0, 0, 0, 0);
				border: 5px solid rgba(0, 183, 229, 0.9);
				opacity: .9;
				border-left: 5px solid rgba(0, 0, 0, 0);
				border-right: 5px solid rgba(0, 0, 0, 0);
				border-radius: 50px;
				box-shadow: 0 0 15px #2187e7;
				width: 36px;
				height: 36px;
				margin: 0 auto;
				-webkit-animation: spin 1s infinite linear;
				animation: spin 1s infinite linear;
			}
			@-webkit-keyframes spin {
				0% {
					-webkit-transform: rotate(0deg);
				}
				100% {
					-webkit-transform: rotate(360deg);
				}
			}
			@keyframes spin {
				0% {
					transform: rotate(0deg);
				}
				100% {
					transform: rotate(360deg);
				}
			}
			.progress {
				width: 90%;
				background-color: #666;
				margin: 0 5%;
				border: 1px solid #222;
				-webkit-border-radius: 5px;
				border-radius: 5px;
			}
			.schedule {
				width: 8px;
				height: 8px;
				margin: 1px 0;
				background-color: #FFCC33;
				-webkit-border-radius: 4px;
				border-radius: 4px;
				-webkit-transition: all 1s linear;
				transition: all 1s linear;
			}
			.stop {
				width: 72px;
				height: 72px;
				background: url(../img/astop.png) center center;
				background-size: 72px 72px;
				margin: auto;
				-webkit-border-radius: 72px;
				border-radius: 72px;
			}
			.stop:active {
				-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5) inset;
				box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5) inset;
			}
			.iplay {
				display: block;
				background: no-repeat right center url();
				background-size: 50px 44px;
				-ms-touch-action: auto;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">语音导游</h1>
		</header>
		<div id="dcontent" class="dcontent">
			<br/>
			<div class="button" onclick="startRecord()">开始录音</div>
			<div class="button" onclick="startPlay('_www/audio/kzxz.m4a')">播放音乐</div>
			<br/>
			<!-- History list -->
			<ul id="history" class="dlist" style="text-align:left;">
				<li id="empty" class="ditem-empty">无历史记录</li>
			</ul>
			<br/>
			<div class="button button-waring" onclick="cleanHistory();">清空历史记录</div>
			<br/>
		</div>
		<div id="output">
			语音导游，可以听可以自己录
		</div>
		<div id="play" class="rp">
			<div id="ptime" class="ptime">00:00:00/00:00:00</div>
			<br/>
			<div id="progress" class="progress">
				<div id="schedule" class="schedule"></div>
			</div>
			<br/>
			<div class="stop" onclick="stopPlay();outSet('停止播放！');"></div>
		</div>
		<div id="record" class="rp">
			<div style="width:100%;height:20%;"></div>
			<div class="rprogress">
				<div class="rschedule"></div>
			</div>
			<br/>
			<div id="rtime" class="rtime">00:00:00</div>
			<br/>
			<div class="stop" onclick="stopRecord();"></div>
		</div>
	</body>

</html>